<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .form-horizontal{
            margin-top: 20px;
            width: 500px;
        }
    </style>
</head>
<body>
    <div>
        <h3>高新一小学生管理系统注册界面</h3>
        <div class="form-horizontal">
            <!-- 用户名的输入框的设置 -->
            <div class="form-group">
                <label for="data-username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-username" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="姓名">
                </div>
            </div>
            <!-- 密码的输入框的设置 -->
            <div class="form-group">
                <label for="data-password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="data-password" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="data-repassword" class="col-sm-2 control-label">密码确认</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="data-repassword" placeholder="密码确认">
                </div>
            </div>
            <!-- 角色的输入框的设置 -->
            <div class="form-group">
                <label for="data-teacher" class="col-sm-2 control-label">角色</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-teacher" checked>教师
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-student">学生
                </label>
            </div>
             <!-- 确认或则取消的输入框的设置 -->
            <div class="form-group" style="transform: translateX(100px);">
                <button id="submit" class="btn btn-primary">注册</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
    </div> 
    <script src="jquery.min.js"></script>
    <script>
        $("#data-username").focus();
        $("#submit").click(function(){
            let username = $("#data-username").val();
            let name = $("#data-name").val();
            let password = $("#data-password").val();
            let repassword = $("#data-repassword").val();
            if($("#data-username").val() && $("#data-name").val() && $("#data-repassword").val() &&
            $("#data-repassword").val() === $("#data-password").val()){
                console.log(7)
                $.ajax({
                    url:"http://127.0.0.1:8800/register",
                    method:"get",
                    data:{
                        username,
                        name,
                        password,
                        repassword,
                        type:$("#data-teacher")[0].checked?1:0,
                    },
                    success(data){
                        alert("注册成功");
                        $("#data-username").val("");
                        $("#data-name").val("");
                        $("#data-password").val("");
                        $("#data-repassword").val("");
                        location.href = "http://127.0.0.1:8800/login.html";
                    }
                })
            }
            else{
                alert("注册失败")
            }
        }) 
        document.onkeydown = function(event){
            if(event.keyCode === 13){
                $("#submit").click();
            }
        }
    </script>
</body>
</html>